<template>
    <div class="todo-header">
      <h3 class="hNum1">每日待办列表</h3>
      <h3 class="hNum2">欢迎您使用 : {{getUserName}}  </h3>
      <button class="btn b3" @click="toEchart">跳转待办</button>
      <button class="btn b1" @click="toMyTime">查看时间</button>
      <button class="btn b2" @click="toLogin">重新登录</button>
        <input type="text" placeholder="请输入你的任务名称，按回车键确认"
         @keyup.enter="add(title)"
          v-model.trim="title" />
    </div>
</template>

<script>
  import {nanoid} from 'nanoid'
    export default {
        name:'MyHeader',
        data() {
          return {
            title:''
          }
        },
        methods:{
          add(){
            const listObj = {id:nanoid(),title:this.title,done:false}
            this.title=''
            this.$store.dispatch('listAbout/add',listObj)
          },
          toMyTime(){
			      this.$router.push('/myTime?userId='+this.$route.query.userId)
          },
          toLogin(){
            this.$router.push('/')
          },
          toEchart(){
            this.$router.push('/Myechart')
          }
        },
        computed:{
          getUserName(){
            const i = this.$route.query.userId
            // const i = this.$store.state.listAbout.userId

            const j = this.$store.state.userAbout.users
            // console.log('i='+i);
            // console.log(j);
            for(let u of j){
              if (u.id == i) {
                return u.userName
              }
            }
            return ''
          }
        },
    }
</script>

<style scoped>

  /*header*/
  .todo-header{
    position: relative;
  }
.todo-header input {
  width: 560px;
  height: 28px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 4px 7px;
  background-color:#ffdcc2;
  outline:none;
}

.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

.hNum1{
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}


.b1{
  position: absolute;
  color: #fff;
  background-color: rgb(78, 137, 33);
  border: 1px solid rgb(47, 100, 7);
  top: 1px;
  left: 468px;
}
.b2{
  position: absolute;
  color: #fff;
  background-color: rgb(78, 137, 33);
  border: 1px solid rgb(47, 100, 7);
  top: 1px;
  left: 368px;
}
.b3{
  position: absolute;
  color: #fff;
  background-color: rgb(78, 137, 33);
  border: 1px solid rgb(47, 100, 7);
  top: 1px;
  left: 268px;
}


</style>